<template>
  <div class="imagesList" >
    <div v-for='value in imageList' :key='value.id' class='images'>
       <img :src="value.img_url" alt="" class="img" @click="$router.push({path: `/ImgDetial/${value.id}`})">
      <div class='title'>
           <h1>{{value.title}}</h1>
          <p>{{value.zhaiyao}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {getimages} from  '@/apis/imgcategory'
export default { 
    props:{
        imagesId:{
            type:Number,
        }
    },
    data(){
        return{
            imageList:[]
        }
    },
    mounted(){
        getimages(this.imagesId)
        .then(res=>{
            // console.log(res);
            this.imageList=res.data.message
        })
    }

}
</script>

<style lang="less" scoped>
.imagesList{
    width: 100%;
    padding-bottom:2.083333rem;
    .images{
        width: 100%;
        position: relative;
        .img{
        width: 100%;
        display: block;
        }
        .title{
            position: absolute;
            left:0;
            bottom:0px;
            color:aliceblue;
            h1{
                font-weight: 700;
                font-size: .833333rem;
                margin-bottom:.416667rem;
            }

        }
    }
    
}
</style>